<template>
  <el-button plain type="primary" style="margin-bottom: 10px;" @click="Open()">添加</el-button>
  <el-button plain type="primary" style="float: right;" @click="Open()">导出</el-button>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column fixed type="index" label="序号" width="60" />
    <el-table-column prop="warehouseCode" label="仓库编码" width="150" />
    <el-table-column prop="warehouseName" label="仓库名称" width="150" />
    <el-table-column prop="warehouseNum" label="库区数量" width="180" />
     <el-table-column prop="warehouseIdSon" label="仓管员" width="180" />
     <el-table-column prop="warehouseAddr" label="仓库地址" width="180" />
     <el-table-column prop="warehouseArea" label="仓库面积" width="180" />
     <el-table-column prop="warehouseDesc" label="备注" width="180" />
    <el-table-column prop="createrPeople" label="创建人" width="130" />
    <el-table-column prop="createTime" label="创建时间" width="180">
      <template #default="scope">
        {{ moment(scope.row.createTime).format('YYYY-MM-DD') }}
      </template>
    </el-table-column>
    <el-table-column prop="updateTime" label="修改时间" width="180">
      <template #default="scope">
        {{ moment(scope.row.updateTime).format('YYYY-MM-DD') }}
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" min-width="120">
     <template v-slot="scope">
                <el-button link type="warning" @click="OpenUpdate(scope.row)">编辑</el-button>
                <el-button link type="danger" @click="Del(scope.row)">删除</el-button>
            </template>
    </el-table-column>
  </el-table>

  <!-- 添加车间弹窗 -->
  <el-dialog v-model="dialogVisible" title="添加产线" width="500px">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px">
      <el-form-item label="仓库编码" prop="warehouseCode">
        <el-input v-model="ruleForm.warehouseCode" placeholder="请输入仓库编码" />
      </el-form-item>
      <el-form-item label="仓库名称" prop="warehouseNum">
        <el-input v-model="ruleForm.warehouseName" placeholder="请输入仓库名称" />
      </el-form-item>
      <el-form-item label="库区数量" prop="warehouseNum">
        <el-input type="number" v-model="ruleForm.warehouseNum"  placeholder="请输入库区数量" />
      </el-form-item>
        <el-form-item label="仓管员" prop="warehouseIdSon">
        <el-input v-model="ruleForm.warehouseIdSon" placeholder="请输入仓管员" />
      </el-form-item>
      <el-form-item label="仓库地址" prop="warehouseAddr">
        <el-input v-model="ruleForm.warehouseAddr" placeholder="请输入仓库地址" />
      </el-form-item>
      <el-form-item label="仓库面积" prop="warehouseArea">
        <el-input  v-model="ruleForm.warehouseArea"  placeholder="请输入仓库面积" />
      </el-form-item>
       <el-form-item label="备注" prop="warehouseDesc">
        <el-input  v-model="ruleForm.warehouseDesc"  placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
      </span>
    </template>
  </el-dialog>
<!-- 修改车间弹窗 -->
    <el-dialog v-model="dialogVisibleUpdate" title="修改产线" width="500px">
    <el-form ref="ruleFormRef" :model="ruleFormUpdate" :rules="rules" label-width="120px">
      <el-form-item label="产线编码" prop="productionLineCode">
        <el-input v-model="ruleFormUpdate.productionLineCode" placeholder="请输入产线编码" />
      </el-form-item>
      <el-form-item label="产线名称" prop="productionLineName">
        <el-input v-model="ruleFormUpdate.productionLineName" placeholder="请输入产线名称" />
      </el-form-item>
      <el-form-item label="产线描述" prop="productionLineDesc">
        <el-input v-model="ruleFormUpdate.productionLineDesc" type="textarea" placeholder="请输入产线描述" />
      </el-form-item>
        <el-form-item label="所属车间" prop="workShopId">
      <el-select v-model="ruleFormUpdate.workShopId" placeholder="请选择车间">
        <el-option v-for="item in cj" :label="item.workShopName" :value="item.id" />
      </el-select>
    </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitFormUpdate(ruleFormRef)">确定</el-button>
      </span>
    </template>
  </el-dialog>
<!--分页-->
  <el-pagination v-model:current-page="page.Index" v-model:page-size="page.Size" :page-sizes="[5, 10, 20, 30]"
        :background="true" layout="total, sizes, prev, pager, next, jumper" :total="page.totalcount" />
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, watch } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { useCounterStore } from '@/stores/counter'
import { Watch } from '@element-plus/icons-vue';

const pinia = useCounterStore();
const tableData = ref([])
const cj=ref([{
   "id": null,
   "workShopName": "",
}])
//产线向后端传参
const page = reactive({
  Index: 1,
  Size: 5,
  totalcount: 0
})
//车间向后端传参
watch(page,()=>{
  GetWare()
})
//钩子
onMounted(() => {
  
  GetWare()
})

//仓库显示
const GetWare=()=>{
  axios.get('/api/ProductionModules/GetWare', { params: page }).then(res => {
    if (res.data.code == 200) {
      tableData.value = res.data.data.totalPage
      page.totalcount = res.data.data.totalcount
    }
  })
}
// 控制弹窗显示
const dialogVisible = ref(false);
const Open = () => {
  dialogVisible.value = true;
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  "warehouseCode": "",
  "warehouseName": "",
  "warehouseNum": "",
  "warehouseIdSon": "",
  "warehouseAddr": "",
  "warehouseArea": "",
  "warehouseDesc": "",
  "createrPeople": pinia.piniaDto.accountName
})



const rules = reactive<FormRules>({
  productionLineCode: [
    { required: true, message: '请输入产线编码', trigger: 'blur' },
  ],
  productionLineName: [
    {
      required: true,
      message: '请输入产线名称',
      trigger: 'blur',
    },
  ],
  workShopId: [
    {
      required: true,
      message: '请选择车间',
      trigger: 'blur',
    }],
    productionLineDesc: [
    {
      required: true,
      message: '请输入产线描述',
      trigger: 'blur',
    },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      axios.post('/api/ProductionModules/AddWare', ruleForm).then(res => {
        if (res.data.code == 200) {
          ElMessage.success(res.data.message);

            dialogVisible.value = false;
          GetWare(); // 提交成功后刷新表格数据
        } else {
          ElMessage.error(res.data.message)
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}




//#region 修改


const dialogVisibleUpdate = ref(false);
const OpenUpdate=(row:any)=>{
  dialogVisibleUpdate.value=true
  ruleFormUpdate.id=row.id
  ruleFormUpdate.productionLineCode=row.productionLineCode
  ruleFormUpdate.productionLineName=row.productionLineName
  ruleFormUpdate.workShopId=row.workShopId
  ruleFormUpdate.productionLineDesc=row.productionLineDesc
}
const ruleFormUpdate = reactive({
  "id":null,
  "productionLineCode": "",
  "productionLineName": "",
  "workShopId": null,
  "productionLineDesc": "",
  "updaterPeople": pinia.piniaDto.accountName
})
//修改网络
const submitFormUpdate = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      axios.put('/api/FactoryModeling/UpdateProductionLine', ruleFormUpdate).then(res => {
        if (res.data.code == 200) {
          ElMessage.success(res.data.message);
            dialogVisibleUpdate.value = false;
          GetWare(); // 提交成功后刷新表格数据
        } else {
          ElMessage.error(res.data.message)
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

//#endregion


//删除
const Del=(row:any)=>{
  ElMessageBox.confirm(
    '确定要删除该仓库吗？删除后数据将无法恢复。',
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then(() => {
    
    axios({
                url: "/api/ProductionModules/DeleteWare",
                method: 'post',
                data: row
            })
    .then(res => {
      if (res.data.code == 200) {
        ElMessage.success(res.data.message);
        GetWare(); // 删除成功后刷新表格数据
      } else {
        ElMessage.error(res.data.message);
      }
    }).catch(error => {
      ElMessage.error('删除失败，请重试');
      console.error('Delete error:', error);
    });
  })
  .catch(() => {
    ElMessage.info('已取消删除');
  });
}
</script>

<style scoped>
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  padding: 10px;
  background-color: #f9fafb;
  border-radius: 8px;
}

.custom-pagination {
  --el-pagination-item-size: 32px;
  --el-pagination-item-bg: #ffffff;
  --el-pagination-item-color: #606266;
  --el-pagination-item-hover-color: #4096ff;
  --el-pagination-item-active-color: #ffffff;
  --el-pagination-item-active-bg: #4096ff;
  --el-pagination-border-radius: 6px;
  --el-pagination-margin: 0 5px;
}

.custom-pagination .el-pagination__prev, .custom-pagination .el-pagination__next {
  width: 32px;
  height: 32px;
  border-radius: 6px;
}

.custom-pagination .el-pagination__sizes {
  margin-right: 10px;
}

.custom-pagination .el-pagination__total {
  margin-right: 10px;
  color: #606266;
}

.custom-pagination .el-pagination__item {
  margin: 0 5px;
  border-radius: 6px;
  min-width: 32px;
  height: 32px;
  line-height: 32px;
}

.custom-pagination .el-pagination__item:hover {
  background-color: #f0f5ff;
}

.custom-pagination .el-pagination__item.is-active {
  background-color: #4096ff;
  color: #ffffff;
}
</style>
